<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">

#{extends 'main.html' /}
#{set title:'CoolSoft BurnDownChart' /}

<html>
	<head>
	
<!--[if IE]>
   <script src="/public/javascripts/highcharts/excanvas.compiled.js" type="text/javascript"></script>
<![endif]-->
		<script type="text/javascript">
			var chart;
			
		$(document).ready(function(x_axis) {
			
			var options = {
				chart: {
					renderTo: 'container',
					defaultSeriesType: 'line',
					shadow : true,
					 backgroundColor :'#E0E0E0',
					 
					  
			
				},
				title: {
					text: 'BurnDownChart',
					style: {
						color:'#2A3636',
						font: '20px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif'
					}
				},
				xAxis: {
					categories: [],
					title:{
						text:'Days'
					},
				},
				yAxis: {
					title: {
						text: 'Total Effort Remaining',
						style: {
							color: '#2A3636',
							font: '17px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif'
							}
					},
					plotLines: [{
                     value: 0,
                     width: 1,
                     color: '#808080'
                        }]
				},
				tooltip: {
					borderRadius:15, 
					backgroundColor:'#EAEAEA',
					
					borderColor:'#2A3636',
					borderWidth:0.5,
					style:{
						color:'#8F2400'
					},
					formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+'Day: '+
            this.x+'<br/>' +'Effort remaining: '+ this.y;
      }
				},
			series: [
			{
				name:'Average Velocity',
				color:'#2A3636',
				data:[]
			},
			{
				name:'Actual Team Velocity',
				color:'#8F2400',
				data:[]
			}]
			};
				 chart = new Highcharts.Chart(options);
			
				
				//var X_AXIS= '${X_Axis_Category}';
				var Average='${averageVelocity}'; 
				if(Average.length==2)
				{
					return;
				}
				var Actual='${daysEffort}';
				//var h=X_AXIS.replace("[","");
				//var x_axis=h.replace("]","");
				
				
				var av=Average.replace("[","");
				var avFinals=av.replace("]","");
				
				var act=Actual.replace("[","");
				var actFinals=act.replace("]","");
				
				
				
				//var splitting=x_axis.split(',');
				var m;
				/*for(var i=0; i<splitting.length; i++)
				{
					var cat=[];
					 m="Day"+splitting[i];
					 cat.push(m);
					
				}
				chart.options.xAxis.categories.push(cat);*/
				var split=avFinals.split(',');
				for(var j=0; j<split.length; j++)
				{
					m=split[j];
					chart.series[0].addPoint(parseFloat(m));
				}
				if(Actual.length==2)
				{
					return;
				}
				
				var splitt=actFinals.split(',');
				for(var k=0; k<splitt.length; k++)
				{
					m=splitt[k];
					chart.series[1].addPoint(parseFloat(m));
				}
	
	
		
});
		</script>
		
	</head>
	<body>
		#{if event.description!="default"}
		<h2>Component ${component.name} BurnDownChart</h2><hr />
		<h3>Project name : <a href="@{Projects.showProject(event.project.getEntityId())}">${event.project.name}</a></h3>
		<b>Project Description: </b>${event.project.description}
		<h3>Sprint:  <a href="@{Events.showSprint(event.getEntityId())}">${event.name}</a></h3>
		<b>Sprint Description: </b>${event.description}<br /><br />
		<b>Component Description: </b>${component.description}<br /><br />
		<b>Total Number of Members: </b>${users}<br /><br />
		<a href="@{BurnDownChart.showChart(event.getEntityId())}"><img src="/public/images/chart_curve.png" border=0>&nbsp;view Team BurnDownChart</a><br /><br />
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; top:50px; margin: 0 auto"></div>
		#{/if}	
	</body>

</html>
